<template>
	<el-aside width="180px" class="aside" ref="asideRef">
		<el-image class="headImg dflex" ref="headImgRef" src='/static/img/login_log.webp' fit="contain"></el-image>
		<el-menu
			:collapse="fold"
			ref="menuRef"
			class="menu sele_none"
			@select="seleMenu"
			:default-active="onRoutes"
			background-color="#fff"
			text-color="#000"
			active-text-color="#ff6a6c"
			unique-opened
		>
			<template v-for="item in items" :key="item.index" >
				<template v-if="item.subs && item.subs.length > 0">
					<el-sub-menu :index="item.url" :show-timeout="500" :hide-timeout="500">
						<template #title>
							<i class="icon margin_r_20" :class="item.icon" v-if="item.icon.indexOf('iconfont') !== -1"></i>
							<el-icon class="icon margin_r_20" :size="30" v-else>
								<component :is="getIconComponent(item.icon.split(' ')[1])"/>
							</el-icon>
							<span>{{ item.title }}</span>
						</template>
						<template v-for="subItem in item.subs" :key="subItem.index">
							<el-menu-item :index="subItem.url">{{ subItem.title }}</el-menu-item>
						</template>
					</el-sub-menu>
				</template>
				<template v-else>
					<el-menu-item :index="item.url" :key="item.index">
						<i class="icon margin_r_20" :class="item.icon"></i>
						<span slot="title">{{ item.title }}</span>
					</el-menu-item>
				</template>
			</template>
		</el-menu>
	</el-aside>
</template>

<script setup>
	import { ref, reactive, computed, onBeforeMount, onMounted, getCurrentInstance, resolveDynamicComponent } from 'vue'
	import { useRoute } from 'vue-router'
	
	const { proxy } = getCurrentInstance()
	const fold = ref(false)
	const menu = reactive({})
	let items = reactive([])
	let menuDatas = reactive([])
	
	// 动态解析 Element Plus 的图标组件
	const getIconComponent = (iconName) => {
	  return resolveDynamicComponent(iconName)
	}
	
	const route = useRoute()
	const onRoutes = computed(() => {
	  return route.path === '/' ? '/pages/home' : route.path
	})
	
	// 子菜单
	const getSubs = (params) => {
		let arr = menuDatas.filter(x => x.parent_id == params._id)
		const subs = reactive([])
		arr.forEach(data => {
			subs.push({
				index: 'sub_' + data._id,
				url: data.url || 'sub_' + data._id,
				title: data.name
			})
		})
		
		return subs
	}
	
	// 菜单
	const getMenu = () => {
		items = []
		menuDatas = uni.getStorageSync("__menu") || []
		
		menuDatas.forEach(data => {
			if (data.parent_id == '')
				items.push({
					icon: data.icon,
					url: data.url || data._id + '',
					index: data._id + '',
					title: data.name,
					subs: getSubs(data)
				})
		})
	}
	
	const seleMenu = (path) => {
		uni.redirectTo({
			url: path
		})
		closeMenu()
	}
	
	const closeMenu = (path) => {
		if (menu && menu.parent_id === '') {
			props.$refs.menuRef.close(props.$refs.menuRef.openedMenus[0])
		}
	}
	
	onBeforeMount(() => {
	  if (window.location.hash == '#/pages/login') return
		
	  getMenu()
	})
	
	onMounted(() => {
		uni.$on('routeChange', (route) => {
			const path = route.path == '/' ? '/pages/home' : route.path
			menu = menuDatas.find(x => x.url == path)
			
			closeMenu();
		})
		
	  uni.$on('loginIn', () => {
	  	getMenu()
	  })
	  
	  uni.$on('loginOut', () => {
	  	closeMenu()
	  	uni.removeStorageSync("__menu");
	  	uni.removeStorageSync("__menu_first")
	  })
		
		uni.$on('fold', res => {
			fold = res
			if (fold) {
				document.getElementsByTagName('uni-left-window')[0].style.width = 'var(--window-left)'
				proxy.$refs.asideRef.$el.style.width = 'var(--window-left)'
				proxy.$refs.headImgRef.$el.style.width = 'var(--window-left)'
				proxy.$refs.headImgRef.$el.style.height = '100px'
			} else {
				document.getElementsByTagName('uni-left-window')[0].style.width = 'var(--window-left)'
				proxy.$refs.asideRef.$el.style.width = 'var(--window-left)'
				proxy.$refs.headImgRef.$el.style.width = '100%'
				proxy.$refs.headImgRef.$el.style.height = '100px'
			}
		})
	})
</script>

<style>
>>> .el-menu {
	border: none;
}

.uni-body .el-sub-menu .el-icon{
	width: 21px;
}

>>> .el-sub-menu__title:hover,
>>> .el-menu-item:hover,
>>> .el-sub-menu__title:hover i {
	color: #ff6a6c !important;
	background-color: #fff !important;
}

>>> .el-sub-menu__icon-arrow {
	transform: rotate(-90deg);
	top: 31px;
	right: 20px;
}

>>> .el-sub-menu.is-opened > .el-sub-menu__title .el-submenu__icon-arrow {
	transform: rotate(0deg);
}

>>> .el-sub-menu .el-menu-item {
	padding: 0 0 0 68px !important;
	min-width: initial !important;
}

>>> .el-menu-item i {
	color: #909399;
}

>>> .el-menu-item.is-active:after {
	content: ' ';
	position: absolute;
	right: 0rem;
	width: 0.3125rem;
	height: 1.25rem;
	background-color: #ff6a6c;
	top: 50%;
	transform: translate(0, -50%);
}

>>> .el-menu-item:hover .icon,
>>> .el-sub-menu:hover .icon {
	font-size: 24px;
	color: #ff6a6c;
}
.uni-body .el-sub-menu:hover .el-icon{
	width: 25px;
}

.aside {
	height: 100%;
	background-color: #ffffff;
	overflow-x: hidden;
	overflow-y: hidden;
	transition: all 0.35s;
	box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1)
}

.headImg {
	width: 100%;
	height: 100px;
	transition: all 0.35s;
}

.el-image:hover {
	transform: scale(1);
}

.menu {
	overflow: overlay;
	height: calc(100% - 100px);
	overflow-x: hidden;
}

.menu::-webkit-scrollbar {
    display: none;
}

.main::-webkit-scrollbar {
	display: none;
}

.icon {
	font-size: 20px;
	transition: font-size 0.2s;
}
.el-icon{
	transition: all 0.2s;
}
</style>
